<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="top_title">会籍实体卡</div>
    <div class="info">
      <div class="title">学员信息</div>
      <div class="item">
        <div class="label">学员姓名</div>
        <div class="value">{{ studentInfo.name || '' }}</div>
      </div>
      <div class="item">
        <div class="label">证件号码</div>
        <div class="value">{{ studentInfo.idCardNumber || '' }}</div>
      </div>
      <div class="item">
        <div class="label">学员性别</div>
        <div class="value">{{ studentInfo.gender && studentInfo.gender.name || '' }}</div>
      </div>
      <div class="item">
        <div class="label">所在班级</div>
        <div class="value">
          <template v-if="studentInfo.classNames && studentInfo.classNames.length > 0">
            <span v-for="(item, index) in studentInfo.classNames" :key="item.id" class="class_tag">
              {{ item.name }} {{ studentInfo.classNames.length - 1 === index ? '': ' / ' }}
            </span>
          </template>
        </div>
      </div>
      <div class="item">
        <div class="label">教练</div>
        <div class="value">
          <template v-if="studentInfo.coachNames && studentInfo.coachNames.length > 0">
            <span v-for="item in studentInfo.coachNames" :key="item.id">
              {{ item.name }}
            </span>
          </template>
        </div>
      </div>
    </div>
    <div>
      <el-divider />
    </div>
    <div class="cards">
      <div class="title">
        <span class="gl_mr_20">绑定实体卡</span>
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="bind">绑定</el-button>
      </div>
      <div v-if="cardList.length > 0">
        <div v-for="item in cardList" :key="item.clubCardId" class="card">
          <div class="num">
            <span class="label">编号</span>
            <div class="number gl_fs_16">{{ item.clubCard && item.clubCard.cardNumber || '' }}</div>
          </div>
          <el-button class="btn" size="mini" @click="deleteIcon(item.clubCard.cardNumber)">解绑</el-button>
        </div>
      </div>
      <div v-else class="gl_noData">
        <p>暂无数据</p>
      </div>
    </div>
    <bindingBox ref="bindingBox" :student-id="studentId" :student-name="studentInfo.name" type="detail" />
  </div>
</template>

<script>
import { api_GET_ClubClubCardStudent, api_DELETE_ClubClubCardStudent } from '@/extend/api/hall.js';
import {
  api_GET_ClubStudentStudentInfoStudentId // 获取会籍信息表
} from '@/extend/api/hallswaggerApi/app';
import { StudentInfoDto } from '@/lib/form/hall/swaggerForm.js';
import bindingBox from './bindingBox.vue';
export default {
  components: { bindingBox },
  data () {
    return {
      studentId: '',
      studentInfo: new StudentInfoDto(),
      qo: {
        ClubCardId: '',
        ClubCardNumber: '',
        RegisterStudentId: '',
        IncludeClubCard: true,
        IncludeRegisterStudernt: true
      },
      cardList: []
    };
  },
  created() {
    this.studentId = this.$route.query.id;
    this.getInfo();
    this.getCardStudent();
  },
  methods: {
    getInfo() {
      if (!this.studentId) {
        that.$message({ type: 'warning', message: '缺少必要参数！' });
        return;
      }
      api_GET_ClubStudentStudentInfoStudentId(this.studentId).then(res => {
        this.studentInfo = res;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    getCardStudent() {
      if (!this.studentId) {
        that.$message({ type: 'warning', message: '缺少必要参数！' });
        return;
      }
      this.qo.RegisterStudentId = this.studentId;
      api_GET_ClubClubCardStudent(this.qo).then(res => {
        this.cardList = res.items || [];
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    bind() {
      this.$refs.bindingBox.dialogVisible = true;
      this.$refs.bindingBox.init();
    },
    deleteIcon(id) {
      const that = this;
      that.$confirm(`您确定要解绑吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const that = this;
          const qo = {
            ClubCardNumber: id,
            RegisterStudentId: this.studentId
          };
          if (!qo.ClubCardNumber || !qo.RegisterStudentId) {
            this.$message({ type: 'warning', message: '缺少必要参数，请重试！' });
            return;
          }
          api_DELETE_ClubClubCardStudent(qo).then(res => {
            this.$message({ type: 'success', message: '解绑成功！' });
            that.getCardStudent();
          }, error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        })
        .catch(() => {
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.top_title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #E8E8E8;
  font-size: 18px;
  font-weight: bold;
  padding-left: 25px;
}
.info {
  padding: 10px 20px 0px;
  width: 100%;
  // height: 300px;
  // background: #ffffff;
  // border-radius: 8px;
  // box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.08);
  .title {
    font-size: 20px;
    padding: 10px 0px;
  }
  .item {
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    padding-left: 15px;
    .label {
      display: inline-block;
      width: 90px;
      height: 45px;
      font-size: 14px;
      color: #606266;
      font-weight: bold;
      padding-right: 15px;
    }
    .value {
      display: inline-block;
      height: 45px;
    }
  }
}
.cards {
  padding: 0px 20px 0px;
  width: 100%;
  .title {
    font-size: 20px;
    padding-bottom: 10px;
  }
  .card {
    position: relative;
    display: inline-block;
    width: 320px;
    height: 190px;
    background: #F5F8FF;
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    margin: 10px 10px 0px 0px;
    .num {
      display: inline-block;
      margin: 15px 0 0 10px;
      .label {
        display: inline-block;
        color:#ABAEB3;
        margin-right:15px;
      }
      .number {
        margin: 15px 0 0 0px;
      }
    }
    .btn {
      position: absolute;
      right: 25px;
      bottom: 25px;
    }
  }
}
</style>

